import React, { Component } from 'react'
import { connect } from 'dva';
import { Form } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DropDownSelectObj } from '@/components/DropDownSelect/index';
import CollectionCreateForm from './FormItem';
import { DICT } from '../enum';
import { UmiComponentProps, SearchComponentProps, BaseComponentProps } from '@/common/type';

interface P {
  buildId: string;
  location?: any;
  match?: {
    params: { id: string }
  };
}

type Props = P & UmiComponentProps & SearchComponentProps & BaseComponentProps;

@connect(({ build_floor, routing }) => ({
  dict: build_floor.dict || {},
  cond: build_floor.cond,
  location: routing.location
}))
class Search extends Component<Props, any> {
  formRef: any;

  state = {
    visible: false,
  }

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'build_floor/queryDict',
      payload: {
        keyList: DICT
      }
    }).then(() => {
      const { cond, form } = this.props;
      const { pageNum, pageSize, ...searchParams } = cond;
      form.setFieldsValue(searchParams);
    });
  }

  search = e => {
    e.preventDefault();
    const { dispatch, form, initCurrent, buildId } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'build_floor/updateCond',
          payload: {
            buildId,
            pageNum: 1,
            ...values
          }
        }).then(() => {
          initCurrent()
        })
      }
    });
  };

  handleChange = (type, value) => {
    const { cond = {}, dispatch, buildId, initCurrent } = this.props;
    cond[type] = value;

    dispatch({
      type: 'build_floor/updateCond',
      payload: {
        ...cond,
        buildId,
      }
    }).then(() => {
      initCurrent()
    })
  }

  saveFormRef = formRef => {
    this.formRef = formRef;
  };

  showModal = () => {
    this.setState({ visible: true })
  };

  handleCancel = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'upload/init' }).then(() => {
      this.setState({ visible: false })
    })
  };

  handleCreate = (v) => {
    const { form } = this.formRef.props;

    form.validateFields((err, values) => {
      const { dispatch } = this.props;
      if (err) return;

      const ans = {
        ...values,
        buildId: this.props.buildId,
        floorPlan: v,
      };
      
      dispatch({
        type: 'build_floor/create',
        payload: ans
      }).then(() => {
        this.setState({ visible: false }, () => form.resetFields());
      })
    });
  };

  render() {
    const { dict = {}, form } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={1} span={5}>
            <Form.Item
              label="楼层类型"
              {...formItemLayout}
            >
              {getFieldDecorator('floorType')(
                DropDownSelectObj({ dict, type: 'floor.type', onChange: (v) => this.handleChange('floorType', +v) })
              )}
            </Form.Item>
          </SearchCol>
          <SearchCol span={19} key={2}>
            <SearchRow type="flex" justify="end">
              <SearchButton htmlType="submit" icon="search">搜索</SearchButton>
              <SearchButton icon="redo" onClick={(e) => {
                this.props.form.resetFields();
                this.search(e)
              }} style={{ 'marginLeft': '15px' }}>重置</SearchButton>
              <SearchButton
                icon='plus' style={{ 'marginLeft': '15px' }} type="primary"
                onClick={this.showModal}
              >新增</SearchButton>
            </SearchRow>
          </SearchCol>
        </SearchRow>
        <CollectionCreateForm
          wrappedComponentRef={this.saveFormRef}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          onCreate={this.handleCreate}
        />
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
